<template>
  <div class="login">
    <div class="login-box">
      <!-- 头部 -->
      <div class="login-header">
        <div class="header-login">登陆</div>
        <el-link type="primary" class="header-link" :underline="false"
          >去注册></el-link
        >
      </div>

      <!-- 中间 -->
      <div class="login-main">
        <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginForm"
          class="demo-loginForm"
        >
          <el-form-item prop="username" class="padding0Label">
            <el-input v-model="loginForm.username" placeholder="请输入用户名">
              <template slot="prepend"
                ><i class="el-icon-user-solid"></i
              ></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" class="padding0Label">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              show-password
            >
              <template slot="prepend"><i class="el-icon-lock"></i></template>
            </el-input>
          </el-form-item>
          <div class="login-footer">
            <div class="remember">
              <el-form-item>
                <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
              </el-form-item>
            </div>
            <div class="forget">
              <el-form-item>
                <el-link
                  type="primary"
                  v-model="loginForm.forget"
                  :underline="false"
                  >忘记密码?</el-link
                >
              </el-form-item>
            </div>
          </div>
          <el-form-item class="login-btn">
            <el-button type="primary" class="w100" @click="login('loginForm')"
              >登陆</el-button
            >
            <el-button type="primary" class="w100">人脸识别</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        checkcode: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let params = {
            ...this.loginForm,
            password: this.processPassword(),
          }
          let resp = await login(params)
          if (resp.resultCode != 0) {
            this.$router.push('/home')
          } else {
            this.$message.error(resp.msg)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    processPassword() {
      let b = require('js-base64').Base64
      let str = b.encode(this.loginForm.password)
      let pw
      if (str.length > 2) {
        const lp = str.substr(0, 2)
        const rp = str.substr(2, str.length)
        pw = rp + lp
      }
      return pw
    },
  },
}
</script>